<template>
    <div id='cpa'>
       <loading mode="full" v-if="loading"></loading>
       <h1 class="card-title">
           <span>CPA订单</span>
       </h1>
       <div class="order-form form-table">
             <div class="form-content">
                <div class="form-item">
                    <div class="form-item__key">放款人</div>
                    <div class="form-item__value">
                        <input type="tel" placeholder="请输入手机号码" v-model='borrowers'>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item__key">放款人姓名</div>
                    <div class="form-item__value">
                        <input type="text" placeholder="请输入姓名" v-model='borrowersName'>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item__key">订单id</div>
                    <div class="form-item__value">
                        <input type="number" placeholder="请输入订单id" v-model='orderId'>
                    </div>
                </div>
                <!-- 借款人新增 -->
                <div class="form-item">
                    <div class="form-item__key">借款人</div>
                    <div class="form-item__value">
                        <input type="tel" placeholder="请输入手机号码" v-model='lenders'>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item__key">借款人姓名</div>
                    <div class="form-item__value">
                        <input type="tel" placeholder="请输入姓名" v-model='lendersName'>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item__key">求借需求id</div>
                    <div class="form-item__value">
                        <input type="tel" placeholder="请输入求借需求id" v-model='demandId'>
                    </div>
                </div>

                <div class="form-item">
                    <div class="form-item__key">开始时间</div>
                    <div class="form-item__value">
                         <date-picker
                                color='#757575'
                                :placeholder='`选择日期`' v-model='dataTime'></date-picker>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item__key">结束时间</div>
                    <div class="form-item__value">
                         <date-picker
                                color='#757575'
                                :placeholder='`选择日期`' v-model='dataTime1'></date-picker>
                    </div>
                </div>

                <div class="form-item">
                    <div class="form-item__key">拓展标签</div>
                    <div class="form-item__value" >
                            <select v-model="sort" class="sort">
                                <option value="">全部</option>
                                    <option v-for='item in this.bayDay' :value="item">
                                        {{item}}
                                     </option>          
                            </select>
                    </div>
                </div>
                 <div class="form-item">
                         <div class="form-item__key">排序规则</div>
                         <div class="form-item__value">
                             <select v-model="sort3" class="sort">
                                 <option value="">全部</option>
                                 <option value="1">交易时间由晚到早</option>
                                 <option value="2">消耗点券数目由大到小</option>
                             </select>
                        </div>
                 </div>
                           
            </div>
            <div  class="form-button"><span class="form-button__item button" @click='findAllTwo(1)'>搜索</span></div>
         </div>
          <el-table
                            ref="multipleTable"
                            :data="tableData3"
                            border
                            style="width: 100%"
                            @selection-change="handleSelectionChange">
                            <!-- <el-table-column
                            type="selection"
                            >
                            </el-table-column> -->
                            <el-table-column
                            prop="id"
                            label="订单ID"
                            >
                                <template slot-scope="scope">
                                   <span v-if='scope.row.id'> {{ scope.row.id }} </span>
                                   <span v-else>--</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="mobile"
                            label="放款人手机"
                            >
                                <template slot-scope="scope">
                                   <span v-if='scope.row.mobile'> {{ scope.row.mobile }} </span>
                                   <span v-else>--</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="realName"
                            label="放款人姓名"
                            >
                                <template slot-scope="scope">
                                   <span v-if='scope.row.realName'> {{ scope.row.realName }} </span>
                                   <span v-else>--</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="phone"
                            label="借款人手机"
                            >
                                <template slot-scope="scope">
                                   <span v-if='scope.row.phone'> {{ scope.row.phone }} </span>
                                   <span v-else>--</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="name"
                            label="借款人姓名"
                            >
                                <template slot-scope="scope">
                                   <span v-if='scope.row.name'> {{ scope.row.name }} </span>
                                   <span v-else>--</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="borrowNo"
                            label="借款线索ID"
                            >
                                <template slot-scope="scope">
                                   <span v-if='scope.row.borrowNo'> {{ scope.row.borrowNo }} </span>
                                   <span v-else>--</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                            label="拓展标签"
                            >
                                <template slot-scope="scope">
                                   <span v-if='scope.row'>
                                        <span v-if='scope.row.allocationStr'>{{ scope.row.allocationStr }}</span>
                                       <span v-else>--</span>  
                                       <!-- <span v-if='scope.row.sysUserName'>
                                           {{ scope.row.sysUserName }}
                                       </span>
                                       <span v-else>--</span>    -->
                                   </span>
                                   <span v-else>--</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="consumeScore"
                            label="消耗点券数"
                            >
                                <template slot-scope="scope">
                                   <span v-if='scope.row.consumeScore'> {{ scope.row.consumeScore }} </span>
                                   <span v-else>--</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="createTime"
                            label="下单时间"
                            >
                                <template slot-scope="scope">
                                   <span v-if='scope.row.createTime'> {{ timestampToDate(scope.row.createTime) }} </span>
                                   <span v-else>--</span>
                                </template>
                            </el-table-column>
                     
                       
            </el-table>
            <pagination
                :current-page='payNo.pageNum'
                :total-page='payNo.totalPage'
                 @pageChange='findAllTwo'></pagination> 
    </div>
</template>

<script>
    import {Promise} from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import datePicker from '../components/DatePicker.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import tabBox from '../components/TabBox.vue'
    import tab from '../components/Tab.vue'
    import checkBox from '../components/CheckBox.vue'
    import checkBoxGroup from '../components/CheckBoxGroup.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import dateFormat from '../filters/filter-dateFormat'
    import toYuan from '../filters/filter-toYuan'
    import  {mapGetters, mapActions}  from 'vuex'
    import {addLenderValidation, resetAccountPasswordValidation, operatorEditValidation} from '../validation/validation'
    import {allApi, lenderApi} from '../api/api'
    import moment from 'moment'
    export default {
        components:{
            footerBar,
            selectGroup,
            selectOption,
            radioGroup,
            tabBox,
            tab,
            radio,
            checkBox,
            checkBoxGroup,
            areaSelect,
            loading,
            toolTip,
            modal,
            confirm,
            buttonLoading,
            pagination,
            datePicker,
        },
        filters: {
            dateFormat,
            toYuan,
            booleanToStr(boolean){
                if (boolean === true) {
                return '是'
                }
                else {
                return '否'
                }
            }
        },
        data() {
            return {
                lenders:'',
                lendersName:'',
                orderId:'',
                dataTime:'',
                dataTime1:'',
                sort:'',
                sort3:'',
                // kfc:'',
                tableData3:[],
                payNo:[],
                isSet:false,
                Array:[],
                bayDay:[],
                loading:true,
                borrowers:'',
                borrowersName:'',
                demandId:''
            }
        },
        computed:{
              ...mapGetters([
                            'msgTip',
                            'localInfo'
                        ]),
            //     replay(){
            //     let records =  _.filter(this.tableData3,(value,index)=>{
            //           return value!==undefined&&value!==null
            //          })
            //         //  console.log(records)
            //         let k=[];
            //         let abbay='';               
            //         _.each(records,(value,index)=>{
            //             // console.log(value.allocationStatus)
            //             // this.transform(value.allocationStatus)
            //             if(value.sysUserName==null){
            //                 value.sysUserName=''
            //             }
            //             if(value.allocationStatus||value.sysUserName){
            //               let abbay=value.allocationStatus+'-'+value.sysUserName
            //               k.push(abbay)
            //             }                 
            //          })
            //            return k                   
            // },
            //     replay(){
            //     let records =  _.filter(this.tableData3,(value,index)=>{
            //           return value!==undefined&&value!==null
            //          })
            //         //  console.log(records)
            //         let k=[];              
            //         _.each(records,(value,index)=>{
            //             // console.log(value.allocationStatus)
            //             // this.transform(value.allocationStatus)
            //                 // k.push(value)
            //                 _.each(value,(v,i)=>{
            //                     // k.push(v)
            //                     if(v==value.allocationStr){
            //                         if(value.allocationStr==null){
            //                             value.allocationStr=''
            //                         }
            //                          if(value.allocationStr){
            //                         if(k.indexOf(v) == -1){  //判断在s数组中是否存在，不存在则push到s数组中
            //                                 k.push(v);
            //                             }
            //                         // k.push(v)
            //                     }    
                                   
            //                     }
            //                 })
            //          })
            //          return k
                                     
            // },
        },
        methods:{
              ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),
            // transform(a){
            //     if(a=='ALLOCATED'){
            //         return '已分配'
            //     }else if(a=='NOTALLOCATED'){
            //         return '待分配'
            //     }else if(a=='HIGHSEAS'){
            //         return '公海中'
            //     }
            // },
            timestampToDate(timestamp){
                if (!timestamp) return this.placeholder
                return moment(timestamp).format('YYYY-MM-DD HH:mm:ss')
                },
            findAllTwo(num){
                // console.log(this.replay)
              this.loading = true
                allApi.findAllTwo(
                    {
                        mobile:this.lenders,
                        name:this.lendersName,
                        mobileC:this.borrowers,
                        nameC:this.borrowersName,
                        borrowNo:this.demandId,
                        orderId:this.orderId,
                        startTime:this.dataTime,
                        endTime:this.dataTime1,
                        allocationStatus:this.sort,
                        rank:this.sort3,
                        pageNum:num,
                        pageSize:10
                    }
                )
                .then(result => {
                    // console.log(this.isSet)
                    // if(this.isSet){
                    //     return
                    // }

                    // this.isSet=true
                     console.log('111')
                     this.loading= false
                    this.tableData3=result.list[0].list
                    this.payNo=result.list[0]

                })
                .catch(error => {
                  this.loading = false
                    console.error(error)
                })
            }, 
            findAllAllocationStr(){
                allApi.findAllAllocationStr(
                    {}
                )
                .then(result => {
                    console.log('111')
                    this.Array=result
                let records =  _.filter(this.Array,(value,index)=>{
                      return value!==undefined&&value!==null
                     })
                _.each(records,(value,index)=>{
                    if(value==null){
                        value=''
                    }
                    if(value){
                     if(this.bayDay.indexOf(value) == -1){  //判断在s数组中是否存在，不存在则push到s数组中
                             this.bayDay.push(value);
                          }
                    }                     
                })
                })
                .catch(error => {
                //   this.loading = false
                    console.error(error)
                })
            }, 
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

        },
        created(){
            this.findAllTwo(1)
            this.findAllAllocationStr()
        },
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    #cpa{
        width:95%;
    }
</style>